<template>
    <div class="layout">
        <!-- 左侧菜单栏 -->
        <div class="menu">
            <LeftMenu></LeftMenu>

        </div>
        <!-- 右侧区 -->
        <div class="content">
            <!-- 右侧上面区域 -->
            <div class="top">
                <!-- 右侧个人信息 -->
                <el-dropdown @command="handleCommand">
                    <el-button type="primary">
                        欢迎:{{ adminname }}
                        <el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="head">头像设置</el-dropdown-item>
                            <el-dropdown-item command="modifyPwd">修改密码</el-dropdown-item>
                            <el-dropdown-item command="personal">个人中心</el-dropdown-item>
                            <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>

                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <!-- 右侧下面区域 -->
            <div class="main">
                <RouterView></RouterView>

            </div>
        </div>

    </div>
</template>

<script setup lang="ts">

import LeftMenu from '@/components/LeftMenu.vue';
import { RouterLink, RouterView } from 'vue-router'
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
let $router = useRouter()
let adminname = localStorage.getItem('pc-account')
const handleCommand = (command: any) => {
    if (command === "loginOut") {
        // 退出登录
        // 清除登陆时的数据记录

        localStorage.removeItem("pc-token");
        localStorage.removeItem("pc-account");
        // 返回到登录页面
        $router.push("/login")
    }
}

</script>

<style scoped lang="less">
.layout {
    display: flex;
    width: 100%;
    height: 100%;
}

// 左侧菜单栏
.layout .menu {
    width: 200px;
    height: 100%;
    background-color: #545c64;
}

.layout .content {
    display: flex;
    /* 纵向排列 */
    flex-direction: column;
    flex: 1;
    height: 100%;
    background-color: #ccc;
}

.layout .content .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 50px;
    width: 100%;
    background-color: #545c64;


}

.layout .content .main {
    flex: 1;
    width: 100%;
    background-color: #eee;
}</style>